<!--
- File:    百科.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="Encyclopedias_box">
        <mt-swipe :auto="4000" class="banner swiper-container" style="height: 8rem">
          <mt-swipe-item class="swiper-slide" v-for="(item,index) in wikiInfo.m_goods_image" :key="index">
            <div class="swiper-slide">
              <img :src="$config.imgsite + $config.uploadImgSrc + item + '_w640h320'" alt=""/></div>
          </mt-swipe-item>
        </mt-swipe>
        <div class="encyimg">
          <!--<img :src="$config.imgsite + $config.uploadImgSrc + wikiInfo.m_goods_image + '_w640h320'">-->
          <h3 class="ency_title">{{wikiInfo.m_name}}</h3>
          <p class="m_tit">
            <span v-show="wikiInfo.m_scientific_name">学名：{{wikiInfo.m_scientific_name}}</span><span class="pl30" v-show="wikiInfo.m_alias !=''">别名：{{wikiInfo.m_alias}}</span>
          </p>
        </div>
      </div>
      <div class="ency_tab">
        <div class="Tabs2">
          <ul>
            <li :class="{'on': tabType == 1}" @click="switchTabType('1')">百科</li>
            <li :class="{'on': tabType == 2}" @click="switchTabType('2')">养护宝典</li>
          </ul>
        </div>
      </div>
      <div class="ProList" v-show="tabType == '1'">
        <div class="Ency_block">
          <div class="encys_list f-cb" v-show="wikiInfo.b_class_name">
            <div class=" fl"><i class="iconfont icon-fenlei1"></i><span>分类</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_class_name, '分类')">{{wikiInfo.b_class_name | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_flower_lang">
            <div class=" fl"><i class="iconfont icon-fenlei"></i><span>花语</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_flower_lang, '花语')">{{wikiInfo.b_flower_lang | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_fengshui">
            <div class=" fl"><i class="iconfont icon-shan"></i><span>风水</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_fengshui, '风水')">{{wikiInfo.b_fengshui | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_light_name">
            <div class=" fl"><i class="iconfont icon-icon"></i><span>光照 </span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_light_description, '光照')">{{wikiInfo.b_light_name | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_bloom_period">
            <div class=" fl"><i class="iconfont icon-hua1"></i><span>花期</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_bloom_period, '花期')">{{wikiInfo.b_bloom_period | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_fruit_period">
            <div class=" fl"><i class="iconfont icon-guoyuan"></i><span>果期</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_fruit_period, '果期')">{{wikiInfo.b_fruit_period | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_tmp">
            <div class=" fl"><i class="iconfont icon-wendu1"></i><span>适宜温度</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_tmp, '适宜温度')">{{wikiInfo.b_tmp | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_un_tmp">
            <div class=" fl"><i class="iconfont icon-wendu1"></i><span>不适温度</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_un_tmp, '不适温度')">{{wikiInfo.b_un_tmp | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_plant">
            <div class=" fl"><i class="iconfont icon-huli"></i><span>栽植形式</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_plant, '栽植形式')">{{wikiInfo.b_plant | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_reproduction">
            <div class=" fl"><i class="iconfont icon-TJ-Detail-huayuan"></i><span>繁殖方式</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_reproduction, '繁殖方式')">{{wikiInfo.b_reproduction | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_position">
            <div class=" fl"><i class="iconfont icon-sheshihuayuan"></i><span>摆放位置</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_position, '摆放位置')">{{wikiInfo.b_position | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_custom1">
            <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{wikiInfo.b_custom1_title}}</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_custom1, wikiInfo.b_custom1_title)">{{wikiInfo.b_custom1 | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_custom2">
            <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{wikiInfo.b_custom2_title}}</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_custom2, wikiInfo.b_custom2_title)">{{wikiInfo.b_custom2 | removeBr}}</div>
          </div>
          <div class="encys_list f-cb" v-show="wikiInfo.b_custom3">
            <div class=" fl"><i class="iconfont icon-postcode"></i><span>{{wikiInfo.b_custom3_title}}</span></div>
            <div class="fr" @click="showDetail(wikiInfo.b_custom3, wikiInfo.b_custom3_title)">{{wikiInfo.b_custom3 | removeBr}}</div>
          </div>
          <a v-show="wikiInfo.b_baike_url && wikiInfo.b_baike_url" class="ency_btn" @click="gotoBaiduBaike(wikiInfo.b_baike_url)">查看百度百科</a>
        </div>
      </div>

      <!--养护宝典-->
      <div class="ProList bg_fff" v-show="tabType == '2'">
        <div class="Planthabits" v-show="tutorialInfo.t_growth_habit">
          <h2>植物习性</h2>
          <p class="mintit" v-show="tutorialInfo.t_growth_habit_sub">{{tutorialInfo.t_growth_habit_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_growth_habit"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_light !=''">
          <h2>温度/光照</h2>
          <p class="mintit" v-show="tutorialInfo.t_light_sub">{{tutorialInfo.t_light_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_light"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_water !=''">
          <h2>水</h2>
          <p class="mintit" v-show="tutorialInfo.t_water_sub">{{tutorialInfo.t_water_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_water"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_change_basin !=''">
          <h2>换盆</h2>
          <p class="mintit" v-show="tutorialInfo.t_change_basin_sub">{{tutorialInfo.t_change_basin_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_change_basin"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_fertilize !=''">
          <h2>施肥</h2>
          <p class="mintit" v-show="tutorialInfo.t_fertilize_sub">{{tutorialInfo.t_fertilize_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_fertilize"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_pest !=''">
          <h2>病虫害</h2>
          <p class="mintit" v-show="tutorialInfo.t_pest_sub">{{tutorialInfo.t_pest_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_pest"></div>
        </div>
        <div class="Planthabits" v-show="tutorialInfo.t_tutorial !=''">
          <h2>养护干货</h2>
          <p class="mintit" v-show="tutorialInfo.t_tutorial_sub">{{tutorialInfo.t_tutorial_sub}}</p>
          <div class="habitstext" v-html="tutorialInfo.t_tutorial"></div>
        </div>
      </div>
      <!--养护宝典 end-->
      <div class="Related_articles" v-show="articleList.requested && articleList.data.length > 0">
        <p class="r_tit">相关文章推荐</p>
        <p v-show="articleList.requested && articleList.data.length <= 0" style="text-align: center; font-size: 12px; color: #999;">暂无文章~</p>
        <div class="articles_list f-cb" v-for="article in articleList.data" @click="gotoArticleDetail(article.id, article.is_sys)">
          <div class="art_tit slh">{{article.title}}</div>
          <div class="author">
            <span class="au_name" @click.stop="gotoBlog(article.member_id, '1')">{{article.member_name}}</span><span class="au_time fr">{{article.add_time | timestampToDate('yyyy-MM-dd')}}</span>
          </div>
        </div>
        <a href="javascript:void(0)" class="diary_more" @click="loadMore" v-show="!articleList.allLoaded">更多</a></div>
    </div>
    <div class="ency_bottom">
      <ul class="f-cb">
        <li class=" bor-r-eee" @click="gotoGoodsList($dictionary.buyType.rent)">
          <a><i class="iconfont icon-xin1"></i><span>租用此花</span></a></li>
        <li class=" bor-r-eee" @click="gotoGoodsList($dictionary.buyType.buy)"><a><i class="iconfont icon-gouwuche"></i><span>购买此花</span></a>
        </li>
        <li @click="switchGardenSelectShow(true)"><a><i class="iconfont icon-lingliao"></i><span>加入花园</span></a></li>
      </ul>
    </div>
    <loading-more :allLoaded="articleList.allLoaded" :show="articleList.data.length > 0"></loading-more>
    <div v-if="gardenSelectShow" style="width: 100%; clear: both;">
      <div class="PopBg" @click="switchGardenSelectShow(false)"></div>
      <ul class="AttributeSelectionPop" style="width: 70%; max-height:50%;overflow:auto; left: 15%; top: 25%;">
        <li class="garden-select-item" style="font-weight: bold">选择加入的花园</li>
        <li class="garden-select-item" @click="addToGarden(item)" v-for="item in garden">
          <template v-if="item.sg_id != '0'">{{item.sg_name}}-</template>
          {{item.garden_name}}
          <template v-if="item.sg_id != '0'">(共享)</template>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'

  export default{
    data() {
      return {
        mid: this.$route.query.id || this.$utils.getQueryString('m_id'),
        goodsCommonId: this.$route.query.goodsCommonId || this.$utils.getQueryString('goods_commonid'),
        tabType: this.$route.query.type || '1', // 1:百科 2: 养护宝典
        defaultAvatar: require('../../assets/images/avatar.png'),
        deviceType: this.$utils.getDeviceType(),
        wikiInfo: {},
        tutorialInfo: {},
        articleList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        garden: {moodGarden: null, myGarden: []},
        selectedGardenId: '',
        gardenSelectShow: false
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getGardenList()
      this.getWikiInfo(this.mid)
      this.getTutorialInfo(this.mid)
      this.getArticleList(this.articleList.page, this.articleList.pageSize)
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    methods: {
      gotoGoodsList(type) {
        this.$router.push({name: 'wiki-goods', query: {wiki: this.mid, buyType: type}})
      },

      switchTabType(type) {
        this.tabType = type
      },
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      gotoArticleDetail(id, isSys) {
        console.log(111)
        if (isSys == '0') { // 手机端发布的文章
//          this.$router.push({name: 'article-detail', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail/' + id // ios微信分享要如此跳转后才能正确分享
        }
        if (isSys == '1') { // 后台发布的文章
//          this.$router.push({name: 'article-detail2', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail2/' + id // ios微信分享要如此跳转后才能正确分享
        }
      },
      gotoBaiduBaike(url) {
//        this.$router.push({name: 'wiki-baidu', query: {url: url}})
        window.location.href = url
//        if (this.deviceType == 'Android' || this.deviceType == 'iPhone') {
//          if (plus) { // eslint-disable-line
//            plus.runtime.openURL(url) // eslint-disable-line
//          } else {
//            console.log('plus not define')
//          }
//        } else {
//          window.location.href = url
//        }
      },
      getGardenList() {
        this.$request.getAllGardenList().then(data => {
          this.garden = data
        })
      },
      async switchGardenSelectShow(boolValue) {
        if (boolValue) {
          let auth = this.$storage.getAuthed()
          if (!auth || auth == 'null') {
            let authStatus = await this.$request.getAuth()
            if (authStatus != '1') { // 未注册过需先注册才能加入花园
              this.$router.push({name: 'member-register'})
              return
            }
          }
        }
        this.gardenSelectShow = boolValue
      },
      addToGarden(garden) {
        this.$router.push({
          name: 'plant-attr',
          query: {garden: garden.g_id, plant: this.mid, plantName: this.wikiInfo.m_name}
        })
      },
      getArticleList(page, pageSize) {
        this.articleList.loading = true
        this.$request.getArticleListByMid(this.mid, page, pageSize).then(data => {
          if (data.length < this.articleList.pageSize) {
            this.articleList.allLoaded = true
          }
          this.articleList.data = [...this.articleList.data, ...data]
        }).finally(() => {
          this.articleList.requested = true
          this.articleList.loading = false
        })
      },
      loadMore() {
        if (this.articleList.loading || this.articleList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getArticleList(++this.articleList.page, this.articleList.pageSize)
        }, 500)
      },
      getWikiInfo(mid) {
        this.$request.getWikiInfo(mid).then(data => {
          this.wikiInfo = data
        })
      },
      getTutorialInfo(mid) {
        this.$request.getTutorialInfo(mid).then(data => {
          this.tutorialInfo = data
        })
      },
      showDetail(str, title) {
        this.$messageBox.alert(str, {title: title})
      }
    }
  }
</script>

<style>
  .garden-select-item {
    line-height: 40px;
    width: 100%;
    height: 40px;
    text-align: center;
    float: none;
    background-color: white;
    z-index: 9999999;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }
</style>